<!DOCTYPE html>
<html>
<head>
    <title>Energy Level Diagram of 18O</title>
</head>
<body>
    <canvas id="myCanvas" width="450" height="360"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        const baseFont = "26px 'Times New Roman', serif";
        const scriptFont = "16px 'Times New Roman', serif";

        // To make lines sharp
        ctx.translate(0.5, 0.5);

        // --- Draw Bounding Box ---
        ctx.strokeRect(40, 40, 370, 250);

        // --- Draw Headers ---
        ctx.font = baseFont;
        ctx.textAlign = 'center';
        // 'E' for Energy
        ctx.fillText('E', 100, 80);
        // 'J^P' for Spin-Parity
        ctx.fillText('J', 350, 80);
        ctx.font = scriptFont;
        ctx.fillText('P', 365, 72);
        
        // --- Energy Level Data & Parameters ---
        const levels = [
            { energy: 0,    spinParity: '0+' },
            { energy: 1.98, spinParity: '2+' },
            { energy: 3.55, spinParity: '4+' }
        ];

        const y_base = 240; // y-coordinate for the ground state (E=0)
        const energy_scale = 35; // pixels per MeV
        const line_x_start = 140;
        const line_x_end = 310;
        const energy_label_x = 100;
        const sp_label_x = 350;

        // --- Draw Energy Levels and Labels ---
        levels.forEach(level => {
            const y = y_base - level.energy * energy_scale;

            // Draw horizontal energy level line
            ctx.beginPath();
            ctx.moveTo(line_x_start, y);
            ctx.lineTo(line_x_end, y);
            ctx.stroke();

            // Draw energy value
            ctx.font = baseFont;
            ctx.textAlign = 'center';
            ctx.fillText(level.energy.toString(), energy_label_x, y + 8);

            // Draw Spin-Parity (J^P)
            const spin = level.spinParity.slice(0, 1);
            const parity = level.spinParity.slice(1);
            ctx.fillText(spin, sp_label_x, y + 8);
            ctx.font = scriptFont;
            ctx.fillText(parity, sp_label_x + 15, y);
        });

        // --- Draw Isotope Label (18O) ---
        ctx.font = baseFont;
        ctx.textAlign = 'center';
        ctx.fillText('O', 225, 268);
        ctx.font = scriptFont;
        ctx.textAlign = 'right';
        ctx.fillText('18', 215, 258);


        // --- Draw Figure Caption ---
        ctx.font = baseFont;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.19', 225, 330);

    </script>
</body>
</html>